<template>
  <el-dialog
    v-model="visible"
    class="component-shop-withdraw-cash-add-or-update"
    :close-on-click-modal="false"
    :title="$t('shopWithdrawCash.withdrawalApplication')"
    width="50%"
  >
    <el-form
      ref="dataFormRef"
      :model="dataForm"
      :rules="dataRule"
      label-width="auto"
      @submit.prevent
    >
      <el-form-item
        :label="$t('shopWithdrawCash.shopName') + '：'"
        prop="shopName"
      >
        <span class="shop-name">{{ dataForm.shopName }}</span>
      </el-form-item>
      <el-form-item
        :label="$t('shopWithdrawCash.accountName') + '：'"
        prop="accountName"
      >
        <span class="account-name">{{ shopBankCard.recipientName }}</span>
      </el-form-item>
      <el-form-item
        :label="$t('shopWithdrawCash.withdrawalAmount') + '：'"
        prop="rechargeAmount"
      >
        <span class="recharge-amount">
          <span class="bold">{{ dataForm.amount }}</span>
          {{ $t('coupon.yuan') }}
        </span>
      </el-form-item>
      <el-form-item
        :label="$t('shopWithdrawCash.payeeInfo') + '：'"
        prop="payeeInformation"
      >
        <div class="payee-Info">
          <p class="tips">
            {{ $t('shopWithdrawCash.sendMoney') }}
            <span class="bold">{{ dataForm.amount }}</span>
            {{ $t('coupon.yuan') + $t('shopWithdrawCash.toAccount') + $t('shopWithdrawCash.tips') }}
          </p>
          <div class="payee-con">
            <div class="payee-con-item">
              <p class="tit">
                {{ $t('shopWithdrawCash.PayeeAccountName') }}：
              </p>
              <p class="txt">
                {{ shopBankCard.recipientName }}
              </p>
            </div>
            <div class="payee-con-item">
              <p class="tit">
                {{ $t('shopWithdrawCash.bankName') }}：
              </p>
              <p class="txt">
                {{ shopBankCard.bankName }}
              </p>
            </div>
            <div class="payee-con-item">
              <p class="tit">
                {{ $t('shopWithdrawCash.beneficiaryBank') }}：
              </p>
              <p class="txt">
                {{ shopBankCard.openingBank }}
              </p>
            </div>
            <div class="payee-con-item">
              <p class="tit">
                {{ $t('shopWithdrawCash.beneficiaryAccount') }}：
              </p>
              <p class="txt">
                <span ref="copyValRef">{{ shopBankCard.cardNo }}</span>&nbsp;&nbsp;
                <textarea
                  ref="inputRef"
                  class="copy-content"
                  maxlength="100"
                />
                <span
                  class="copy-txt"
                  data-clipboard-text
                  @click="copyAccountNum"
                >{{ $t('shopWithdrawCash.copy') }}</span>
              </p>
            </div>
            <div class="payee-con-item">
              <p class="tit">
                {{ $t('publics.remark') }}：
              </p>
              <p class="txt">
                {{ dataForm.shopRemarks }}
              </p>
            </div>
          </div>
        </div>
      </el-form-item>
      <el-form-item
        :label="$t('distributionMsg.auditStatus') + '：'"
        prop="status"
      >
        <el-radio-group
          v-if="dataForm.status <2"
          v-model="dataForm.status"
          :disabled="oldStatus !== 0"
        >
          <el-radio
            :label="0"
            :disabled="true"
          >
            {{ $t('shop.underReview') }}
          </el-radio>
          <el-radio :label="1">
            {{ $t('shopWithdrawCash.succeeded') }}
          </el-radio>
          <el-radio :label="-1">
            {{ $t('shopWithdrawCash.failed') }}
          </el-radio>
        </el-radio-group>
        <div v-if="dataForm.status >1">
          <el-tag
            v-if="dataForm.status == 2"
            type="success"
          >
            {{ $t('shop.succIss') }}
          </el-tag>
          <el-tag
            v-if="dataForm.status == 3"
            type="danger"
          >
            {{ $t('shop.failIss') }}
          </el-tag>
        </div>
      </el-form-item>
      <el-form-item
        v-if="dataForm.status > 0"
        :label="$t('shopWithdrawCash.rayerInfo') + '：'"
        prop="payerInformation"
      >
        <div class="payer-info">
          <el-form-item
            :label="$t('shopWithdrawCash.paymentAccountName') + '：'"
            prop="payingAccount"
            class="payer-item"
          >
            <el-input
              v-model="dataForm.payingAccount"
              type="text"
              maxlength="20"
              :placeholder="$t('shopWithdrawCash.enterPaymentAccountName')"
              :disabled="oldStatus !== 0"
            />
          </el-form-item>
          <el-form-item
            :label="$t('shopWithdrawCash.paymentAccountNum') + '：'"
            prop="payingCardNo"
            class="payer-item"
          >
            <el-input
              v-model="dataForm.payingCardNo"
              type="text"
              maxlength="23"
              show-word-limit
              :placeholder="$t('shopWithdrawCash.enterPaymentAccountNum')"
              :disabled="oldStatus !== 0"
            />
          </el-form-item>
          <el-form-item
            :label="$t('shopWithdrawCash.paymentDate') + '：'"
            prop="payingTime"
          >
            <el-date-picker
              v-model="dataForm.payingTime"
              type="date"
              :placeholder="$t('dataAnalysis.selectDate')"
              value-format="YYYY-MM-DD"
              :disabled="oldStatus !== 0"
              :disabled-date="pickerOptions0.disabledDate"
            />
          </el-form-item>
        </div>
      </el-form-item>
      <el-form-item
        :label="$t('publics.remark') + '：'"
        prop="remarks"
        class="remarks-textarea"
      >
        <el-input
          v-model="dataForm.remarks"
          type="textarea"
          :autosize="{ minRows: 1, maxRows: 4}"
          maxlength="100"
          show-word-limit
          :placeholder="$t('components.pleaseEnterRemarks')"
          :disabled="oldStatus !== 0"
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <span
        class="dialog-footer"
      >
        <div
          class="default-btn"
          @click="visible = false"
        >{{ $t('remindPop.cancel') }}</div>
        <div
          v-if="oldStatus === 0"
          class="default-btn primary-btn"
          @click="dataFormSubmit()"
        >{{ $t('groups.submit') }}</div>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { ElMessage } from 'element-plus'
import { reactive } from 'vue'

const emit = defineEmits(['refreshDataList'])

const validatePayingAccount = (rule, value, callback) => {
  if (validNoEmptySpace(value)) {
    callback(new Error($t('shopWithdrawCash.enterPayerAccountName')))
  } else {
    callback()
  }
}
const vaildPayingCardNo = (rule, value, callback) => {
  if (validNoEmptySpace(value)) {
    callback(new Error($t('shopWithdrawCash.enterPayerAccount')))
  } else {
    callback()
  }
}
const vaildRemarks = (rule, value, callback) => {
  if (value === null || value === '') {
    dataFormRef.value.clearValidate('remarks')
    callback()
  } else if (validNoEmptySpace(value)) {
    callback(new Error($t('shopProcess.inputAllSpace')))
  } else {
    callback()
  }
}

const Data = reactive({
  visible: false,
  dataForm: {
    status: 1,
    payingAccount: '', // 付款户名
    payingCardNo: '', // 付款账号
    payingTime: '' // 付款日期
  },
  shopBankCard: {
    bankName: '',
    cardNo: '',
    openingBank: '',
    recipientName: ''
  },
  oldStatus: 0,
  dataRule: {
    payingAccount: [
      { required: true, message: $t('shopWithdrawCash.enterPayerAccountName'), trigger: 'blur' },
      { validator: validatePayingAccount, trigger: 'blur' }
    ],
    payingCardNo: [
      { required: true, message: $t('shopWithdrawCash.enterPayerAccount'), trigger: 'blur' },
      { validator: vaildPayingCardNo, trigger: 'blur' }
    ],
    payingTime: [
      { required: true, message: $t('shopWithdrawCash.selectPaymentDate'), trigger: 'blur' }
    ],
    remarks: [{ validator: vaildRemarks, trigger: 'blur' }]
  },
  pickerOptions0: {
    disabledDate (time) {
      return time.getTime() > Date.now() - 8.64e6
    }
  }
})

const { visible, dataForm, shopBankCard, oldStatus, dataRule, pickerOptions0 } = toRefs(Data)

const dataFormRef = ref()
const init = (rowData) => {
  const dataForm = Object.assign({}, rowData)
  Data.shopBankCard = Object.assign({}, rowData.shopBankCard)
  Data.visible = true
  nextTick(() => {
    dataFormRef.value.resetFields()
    Data.dataForm = dataForm
    Data.dataForm.shopBankCard = null
    Data.oldStatus = dataForm.status
    Data.dataForm.status = Data.dataForm.status || 1
  })
}

const inputRef = ref()
const copyValRef = ref()
/**
     * 复制
     */
const copyAccountNum = () => {
  inputRef.value.value = copyValRef.value.innerText // 替换文本框内容
  inputRef.value.select() // 选中文本
  document.execCommand('copy') // 执行浏览器复制命令
  ElMessage({
    message: $t('shopWithdrawCash.copySucceeded'),
    type: 'success',
    duration: 1000
  })
}

// 表单提交
const dataFormSubmit = () => {
  if (Data.dataForm.status === 0) {
    ElMessage({
      message: $t('user.pleaseSelect') + $t('shopProcess.auditStatus'),
      type: 'warning',
      duration: 1000
    })
    return
  }
  dataFormRef.value.validate((valid) => {
    if (valid) {
      http({
        url: http.adornUrl('/shop/shopWithdrawCash/audit'),
        method: 'put',
        data: http.adornData(Data.dataForm)
      }).then(() => {
        ElMessage({
          message: $t('shopWithdrawCash.succeeded'),
          type: 'success',
          duration: 1500,
          onClose: () => {
            Data.visible = false
            emit('refreshDataList')
          }
        })
      })
    }
  })
}

defineExpose({
  init
})
</script>

<style scoped>
.bold {
  font-weight: bold;
  font-size: 16px;
  padding: 0 2px;
}
/* 收款方信息 */
.payee-Info {
  border: 1px solid #eee;
  border-radius: 3px;
  padding: 15px;
  margin-bottom: 15px;
  width: 98%;
}
.payee-con-item {
  padding: 10px;
  line-height: 1em;
  word-break: break-word;
  display: flex;
}
.tips {
  line-height: 1.5em;
  padding-bottom: 10px;
}
.tit {
  display: inline-block;
  min-width: 100px;
  width: auto;
  text-align: left;
  margin-right: 10px;
}
.txt {
  display: inline-block;
  text-align: left;
  position: relative;
}
.copy-txt {
  color: #1c60d4;
  cursor: pointer;
}
.copy-content {
  width: 1em;
  height: 1em;
  border: 0;
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  z-index: -11;
}
/* 付款人信息 */
.payer-info {
  border: 1px solid #eee;
  padding: 20px;
  border-radius: 3px;
  width: 98%;
  margin-bottom: 10px;
}
.payer-item {
  margin-bottom: 20px !important;
}
.remarks-textarea :deep(.el-textarea__inner) {
  min-height: 60px !important;
  padding-right: 60px;
}
</style>
